<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--
计算属性两个作用
一、计算属性的使用 当作普通的变量来使用 没有大括号 方法的使用 有大括号  不能同时使用   两者的区别是计算属性可以缓存  方法不能缓存
二、计算属性可以有get和set的方法  get方法和单独写一个计算方法作用一样
    set方法是可以进行设置值  使用方法是app.jisuan="你好"
 -->
  <div id="app">
      {{message}}<br/>
      <!--计算属性的使用 当作普通的变量来使用 没有大括号-->
      {{jisuan}}<br/>
      <!--方法的使用 有大括号  不能同时使用   两者的区别是计算属性可以缓存  方法不能缓存-->
     <!-- {{jisuan()}}<br/>-->
      直接使用方法来得到:{{message.split('').reverse().join('')}}<br/>
      copyMsg： {{copyMsg}}

  </div>

<script>
    var app =new Vue({
      el:"#app",
        data: {
             message:'hello world',
             copyMsg:null,
        },
        computed:{
            /*jisuan : function(){
                return 3+3;
                }*/
            jisuan:{
                //这里的get方法和上边的计算方法的jisuan的方法一样
                get(){
                    return 3+3;
                },
                set(newVul){
                       //计算属性可以有get和set的方法  get方法和单独写一个计算方法作用一样
                       //set方法是可以进行设置值  使用方法是app.jisuan="你好"
                      this.copyMsg=newVul;
                }
            }

        },
        methods : {
         // jisuan:function(){
           //   return 2+3;
          //}
        }


    });

</script>
</body>
</html>